<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" type="text/css" />
		<link rel="stylesheet" href="../assets/plugins/layui/css/layui.css" type="text/css" />
		<style>
			.infoview{
				position: absolute;
				top: 10px;
				left: 10px;
				padding: 10px 15px;
				border-radius: 4px;
				border: 1px solid rgba(128, 128, 128, 0.5);
				color: #ffffff;
				background: rgba(0, 0, 0, 0.4);
				box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
		  <div class="layui-body" id="CEarthContainer" style="top: 0rem;left: 0rem;padding-bottom:0rem">
		  </div>			
		</div>
		
		
 	 <div class="infoview">
			<table class="layui-form">
				<tr>
					<td> <input type="checkbox" name="close" lay-skin="switch"  lay-filter="switchAddAndRemove" lay-text="添加|移出"></td>
				</tr>
				<tr>
					<td> <input type="checkbox" name="close" lay-skin="switch" lay-filter="switchShowOrHide" lay-text="显示|隐藏"></td>
				</tr>	
				<tr>
					<td><button type="button" class="layui-btn layui-btn-radius layui-btn-xs" id="locationBtn">定位</button></td>
				</tr>							
			</table>
		</div>	
		
		
		
		

		<script src="../../../build/Cesium/Cesium.js"></script>
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script src="../assets/plugins/layui/layui.js" charset="utf-8"></script>

		<script>
		
		layui.use(['form', 'layedit', 'laydate'], function(){
		   var $ = layui.jquery
		  ,form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		   
		  //创建三维地球场景
		  var app = new CEarth.App('CEarthContainer', {
		  	scene: {
		  		center: {
		  			x:  119.301166,
		  			y: 26.058558,
		  			z: 145.08,
		  			heading: 3.1,
		  			pitch:  -22.9
		  		},
		  		showSun: true,
		  		showMoon: true,
		  		showSkyBox: true,
		  		showSkyAtmosphere: true,
		  		fog: true,
		  		fxaa: true,
		  		globe: {
		  			show: true,
		  			showGroundAtmosphere: false,
		  			depthTestAgainstTerrain: false,
		  			baseColor: '#546a53',
		  		},
		  		cameraController: {
		  			zoomFactor: 3.0,
		  			minimumZoomDistance: 1,
		  			maximumZoomDistance: 50000000,
		  			enableRotate: true,
		  			enableZoom: true,
		  		},
		  	},
		  	control: {
		  		baseLayerPicker: true, //basemaps底图切换按钮
		  		homeButton: true, //视角复位按钮
		  		sceneModePicker: true, //二三维切换按钮
		  		navigationHelpButton: true, //帮助按钮
		  		navigationInstructionsInitiallyVisible:false,
		  		fullscreenButton: true, //全屏按钮
		  		timeline: false, //时间轴
		  		animation: false, //动画部件
		  	},
		  	terrainViewModels: [{
		  			name: '无地形',
		  			iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
		  			tooltip: 'WGS84标准椭球，即 EPSG:4326',
		  			category: '',
		  			params: {
		  				type: 'none',
		  			}
		  		},
		  		{
		  			name: '地形服务【xyz】',
		  			iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/CesiumWorldTerrain.png'),
		  			tooltip: 'arcgis官方提供的高分辨率全球地形',
		  			category: '',
		  			params: {
		  				type: 'xyz',
		  				url: 'http://data.marsgis.cn/terrain',
		  			}
		  		}
		  	],
		  	imageryViewModels: [{
		  			name: '天地图影像(EPSG:3857)',
		  			iconUrl: '../assets/img/tdt_img.png',
		  			tooltip: '天地图影像(EPSG:3857)',
		  			type:'tdt',
		  			layer:'img_d',
		  			key:'9ae78c51a0a28f06444d541148496e36',
		  			show: true,
		  		},{
		  			name: '天地图电子(EPSG:3857)',
		  			iconUrl: '../assets/img/tdt_vec.png',
		  			tooltip: '天地图电子(EPSG:3857)',
		  			type:'group',
		  			layers: [
		  			  { name: '底图', type: 'tdt', layer: 'vec_d', key:'2a0e637a8772d92b123ee8866dee4a82'},
		  			  { name: '注记', type: 'tdt', layer: 'vec_z', key:'9ae78c51a0a28f06444d541148496e36'}
		  			],
		  		},{
		  			name: '天地图地形(EPSG:3857)',
		  			iconUrl: '../assets/img/tdt_ter.png',
		  			tooltip: '天地图地形(EPSG:3857)',
		  			type: 'group',
		  			layers: [
		  			  { name: '底图', type: 'tdt', layer: 'ter_d', key: '2a0e637a8772d92b123ee8866dee4a82' },
		  			  { name: '注记', type: 'tdt', layer: 'ter_z', key: '9ae78c51a0a28f06444d541148496e36' }
		  			],
		  		},{
		  			name: '天地图影像(EPSG:4326)',
		  			iconUrl: '../assets/img/tdt_img.png',
		  			tooltip: '天地图影像(EPSG:4326)',
		  			type: 'group',
		  			layers: [
		  			  {
		  				name: '底图',
		  				type: 'tdt',
		  				layer: 'img_d',
		  				crs: 'EPSG:4326',
		  				key: '2a0e637a8772d92b123ee8866dee4a82',
		  			  },
		  			  {
		  				name: '注记',
		  				type: 'tdt',
		  				layer: 'img_z',
		  				crs: 'EPSG:4326',
		  				key: '9ae78c51a0a28f06444d541148496e36',
		  			  }
		  			]
		  		},{
		  			name: '天地图电子(EPSG:4326)',
		  			iconUrl: '../assets/img/tdt_vec.png',
		  			tooltip: '天地图电子(EPSG:4326)',
		  			type: 'group',
		  			layers: [
		  			  {
		  				name: '底图',
		  				type: 'tdt',
		  				layer: 'vec_d',
		  				crs: 'EPSG:4326',
		  				key: '2a0e637a8772d92b123ee8866dee4a82',
		  			  },
		  			  {
		  				name: '注记',
		  				type: 'tdt',
		  				layer: 'vec_z',
		  				crs: 'EPSG:4326',
		  				key: '9ae78c51a0a28f06444d541148496e36',
		  			  }
		  			]
		  		},{
		  			name: '天地图地形(EPSG:4326)',
		  			iconUrl: '../assets/img/tdt_ter.png',
		  			tooltip: '天地图地形(EPSG:4326)',
		  			type: 'group',
		  			layers: [
		  			  {
		  				name: '底图',
		  				type: 'tdt',
		  				layer: 'ter_d',
		  				crs: 'EPSG:4326',
		  				key: '2a0e637a8772d92b123ee8866dee4a82',
		  			  },
		  			  {
		  				name: '注记',
		  				type: 'tdt',
		  				layer: 'ter_z',
		  				crs: 'EPSG:4326',
		  				key: '9ae78c51a0a28f06444d541148496e36',
		  			  }
		  			]
		  		}
		  	]
		  });
		app.scene.light = new Cesium.DirectionalLight({ //去除时间原因影响模型颜色
				direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772)
			  })
		   //添加移出
		  form.on('switch(switchAddAndRemove)', function(data){
				if(this.checked){
					let tile3d=app.modelLayer.add({
						type:1,
						model:{
							id:123456,
							url:"http://data.mars3d.cn/3dtiles/max-fcfh/tileset.json",
							maximumScreenSpaceError: 1,
							maximumMemoryUsage: 1024,
							
							skipLevelOfDetail: true,
							loadSiblings: true,
							cullRequestsWhileMoving: true,
							cullRequestsWhileMovingMultiplier: 10,
							preferLeaves: true,
							dynamicScreenSpaceError: true,
							preloadWhenHidden: true,
							//lightColor: new Cesium.Cartesian3(100.0,100.0, 100.0)
						},
						attributes:{}
					});
					
					console.log(tile3d);
					
					// tile3d.addEventListener('readyLoad',function(tileset){
					// 	tileset.style = new Cesium.Cesium3DTileStyle({
					// 	  color: {
					// 		conditions: [
					// 		  ["${name} ==='7HL001'", 'rgb(255, 255, 255)'],
					// 		  ['true', 'rgba(255, 255, 255,0.03)'],
					// 		]
					// 	  }
					// 	});
						
					// });
				}else{
					app.modelLayer.delete(123456) 
				}
		  });
		  
		  //显示隐藏
		  form.on('switch(switchShowOrHide)', function(data){
				if(this.checked){
					app.modelLayer.show(123456) 
				}else{
					app.modelLayer.hide(123456) 
				}
		  });
		  
		  //定位
		  $("#locationBtn").click(function(){
		      app.modelLayer.focus({
				  id:123456,
				  distance:1000,
				  rotation:{
					  heading:0,
					  pitch:-90,
					  roll:0
				  }
			  });
		  });
		  
		  
		  app.on({
			 type:'LEFT_CLICK',
			 backType:0,
		  },function(event){
			  console.log(event);
			if(event.thing){
				 if(event.thing instanceof Cesium.Cesium3DTileFeature){
					   event.thing.tileset.style = new Cesium.Cesium3DTileStyle({
					    color: {
					  	conditions: [
					  	  ["${name} ==='" +  event.thing.getProperty('name') + "'", 'rgb(255, 255, 255)'],
					  	  ['true', 'rgba(255, 255, 255,0.03)'],
					  	],
					    },
					  })
					  
				 }
				 
				 // var id = event.thing.getProperty('id'); // e.g., the height of a building
				 // var objectid = event.thing.getProperty('objectid'); // e.g., the height of a building
				 // console.log('id',id)
				 // console.log('id',event.thing.tileset.id)
				 // console.log('objectid',objectid)
				  // app.modelLayer.setHighlight({
					 // id:event.thing.id,
				  // });
			}  
		  });
		  
		  
	})
		
		
		
			
			
			// tile3d.readyPromise.then(function(tileset) {
			// 	tile3d.heightOffset=120
			// 	// tile.properties is not defined until readyPromise resolves.
			// 	var properties = tileset.properties;
			// 	if (Cesium.defined(properties)) {
			// 		for (var name in properties) {
			// 			console.log(properties[name]);
			// 		}
			// 	}
			// 	console.log(tile3d.getCenter(tileset))
			// });
			
			// tile3d.allTilesLoaded.addEventListener(function() {
			//     console.log('All tiles are loaded');
			// });
			// tile3d.initialTilesLoaded.addEventListener(function() {
			//     console.log('Initial tiles are loaded');
			// });
			// tile3d.loadProgress.addEventListener(function(numberOfPendingRequests, numberOfTilesProcessing) {
			//     if ((numberOfPendingRequests === 0) && (numberOfTilesProcessing === 0)) {
			//         console.log('Stopped loading');
			//         return;
			//     }
			//     console.log('Loading: requests: ' + numberOfPendingRequests + ', processing: ' + numberOfTilesProcessing);
			// });
			// tile3d.tileFailed.addEventListener(function(error) {
			//     console.log('An error occurred loading tile: ' + error.url);
			//     console.log('Error: ' + error.message);
			// });
			// tile3d.tileLoad.addEventListener(function(tile) {
			//     console.log('A tile was loaded.');
			// });
			// tile3d.tileUnload.addEventListener(function(tile) {
			//     console.log('A tile was unloaded from the cache.');
			// });

			// tile3d.tileVisible.addEventListener(function(tile) {
			//     var content = tile.content;
			//     var featuresLength = content.featuresLength;
			//     for (var i = 0; i < featuresLength; i+=2) {
			//         content.getFeature(i).color = Cesium.Color.fromRandom();
			//     }
			// });
			

			
			
			
			
			// tile3d.style = new Cesium.Cesium3DTileStyle({
			//    color : {
			//        conditions : [
			//            ['${Height} >= 100', 'color("purple", 0.5)'],
			//            ['${Height} >= 50', 'color("red")'],
			//            ['true', 'color("blue")']
			//        ]
			//    },
			//    show : '${Height} > 0',
			//    meta : {
			//        description : '"Building id ${id} has height ${Height}."'
			//    }
			// });
			
			// Apply a red style and then manually set random colors for every other feature when the tile becomes visible.
			// tile3d.style = new Cesium.Cesium3DTileStyle({
			//     color : 'color("red")'
			// });
		</script>
	</body>
</html>
